<template>
  <div class="interface">
    <DFPageList ref="dfPageListRef" :pageOptions="pageOptions">
      <template #interfaceJson>
        <json-editor-vue
          class="editor"
          v-model="interfaceJson"
          currentMode="code"
          :onChange="handleJsonChange(interfaceJson)"
        />
      </template>
    </DFPageList>
    <DrawerTemplate ref="drawerTemplateRef" class="drawerTemplate-style" />
    <DrawerTemplateModal
      ref="drawerTemplateModalRef"
      @open-drawer-template-modal-fn="openDrawerTemplateModalFn"
    />
  </div>
</template>

<script lang="ts" setup name="Interface">
  import lang from './lang';
  import { useMixins } from '@/hooks/useMixins';
  import {
    pageInterface,
    addInterface,
    updateInterface,
    delInterface,
  } from '@/api/gather/interface';
  // import { listMachine } from '@/api/base/machine';
  // import { infoParamConfig } from '@/api/system/paramConfig';
  import JsonEditorVue from 'json-editor-vue3';
  // import { cloneDeep } from 'lodash-es';
  import DrawerTemplate from '../../wip/productionCenter/components/Drawer/DrawerTemplate.vue';
  import DrawerTemplateModal from '../../wip/productionCenter/components/Drawer/DrawerTemplateModal.vue';
  const { loadLangFn, t } = useMixins();
  loadLangFn(lang);

  const dfPageListRef: any = ref(null);

  // const machineList = ref([]);

  const interfaceJson = ref();

  const handleJsonChange = (e) => {
    dfPageListRef.value.setFieldsValueFn({ interfaceJson: e });
    if (e && Object.keys(e).length !== 0) {
      dfPageListRef.value?.validate(['interfaceJson']);
    }
  };

  // const interfaceJJ = ref()

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          label: 'interfaceName',
        },
        {
          label: 'interfaceCode',
        },
      ],
    },
    table: {
      columns: [
        {
          width: 170,
          label: 'interfaceName',
        },
        {
          width: 170,
          label: 'interfaceCode',
        },
        {
          width: 170,
          label: 'remark',
          common: true,
        },
      ],
      action: {
        columns: [
          {
            label: 'preview',
            type: 'primary',
            click: (e) => {
              console.log('click', e);
              openDrawerFn(JSON.parse(e.interfaceJson));
            },
          },
          {
            label: 'edit',
          },
          {
            label: 'copy',
          },
          {
            label: 'delete',
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
      ],
      requestFn: pageInterface,
      delRequestFn: delInterface,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'interfaceName',
          required: true,
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'interfaceCode',
          required: true,
          giProps: { span: 4 },
          span: 3,
          editDialogDisabled: true,
        },
        {
          label: 'interfaceJson',
          slot: 'interfaceJson',
          maxlength: '999999999',
          required: true,
          giProps: { span: 4 },
          span: 3,
          rules: [
            {
              required: true,
              key: 'interfaceJson',
              validator(_rule, value: string) {
                if (!value || Object.keys(value).length === 0) {
                  return new Error(t('common.formTipMsg.input'));
                }
              },
              trigger: ['blur', 'change'],
            },
          ],
        },
        {
          label: 'remark',
          common: true,
          type: 'textarea',
          giProps: { span: 4 },
          span: 3,
        },
      ],
      cols: 2,
      addDataFn: addInterface,
      updateDataFn: updateInterface,
      setDialogDataFn: async (data, type) => {
        if (type === 'add') {
          interfaceJson.value = {};

          const newData: any = {};

          return newData;
        }

        if (type === 'copy') {
          delete data.id;
        }

        if (data && data.interfaceJson) interfaceJson.value = JSON.parse(data.interfaceJson);

        return data;
      },
      setDialogSubmitDataFn: (data) => {
        console.log('interfaceJson.value', interfaceJson.value);
        data.interfaceJson = JSON.stringify(interfaceJson.value) || null;
        return data;
      },
    },
  };

  const drawerTemplateRef: any = ref(null);
  const drawerTemplateModalRef: any = ref(null);

  function openDrawerFn(type, id: any = null, scrollId: any = null) {
    const data = type;

    if (
      data &&
      !data.notOpen &&
      drawerTemplateRef &&
      drawerTemplateRef.value &&
      drawerTemplateRef.value.open
    )
      drawerTemplateRef.value.open(data, id, scrollId);
  }

  function openDrawerTemplateModalFn(data, id: any = null, scrollId: any = null) {
    if (
      data &&
      drawerTemplateModalRef &&
      drawerTemplateModalRef.value &&
      drawerTemplateModalRef.value.openModalFn
    )
      drawerTemplateModalRef.value.openModalFn(data, id, scrollId);
  }

  provide('openDrawerTemplateModalFn', openDrawerTemplateModalFn);
</script>

<style>
  .jsoneditor-poweredBy,
  .jsoneditor-transform,
  .jsoneditor-repair,
  .jsoneditor-sort {
    display: none;
  }
</style>
